<template>
    <div>
        <el-descriptions :title="options.stageName" :column="2" size="small" border>
          <el-descriptions-item label="农事事项" label-class-name="yutitem">{{options.stageName}}</el-descriptions-item>
          <el-descriptions-item label="负责人" label-class-name="yutitem">
            <!-- <span v-for="(dt,num) in options.fuzeUserList" :key="dt.fuzeUserId">
                {{dt.fuzeRealName}}
                <template v-if="num<options.fuzeUserList.length-1">、</template>
            </span> -->
            {{ options.fuzeRealName }}
          </el-descriptions-item>
          <el-descriptions-item label="完成日期" :span="3" label-class-name="yutitem">
            {{options.taskStartTime}} ~ {{options.taskEndTime}}
          </el-descriptions-item>
          <el-descriptions-item label="农事位置" :span="3" label-class-name="yutitem">
            <!-- <span v-for="(dt,num) in options.lineLandRspList" :key="dt.farmLandId">
                {{dt.farmLandName}}
                <template v-if="num<options.lineLandRspList.length-1">、</template>
            </span> -->
            <table class="itemTableBox" style="width:100%;min-width:100%;margin:10px 0;">
              <tr>
                  <th width="80">序号</th>
                  <th>地块名称</th>
                  <th>地块面积(亩)</th>
                  <th>地块质地</th>
                  <th>地块分组</th>
                  <th>位置</th>
                  <th>备注</th>
              </tr>
              <tr v-for="(dt,index) in details.lineLandRspList" :key="dt.farmLandId">
                  <td>{{index + 1}}</td>
                  <td>{{dt.farmLandName}}</td>
                  <td>{{dt.areaSize}}</td>
                  <td>{{dt.geologyName}}</td>
                  <td>{{dt.groupName}}</td>
                  <td>{{ dt.locationAddress }}</td>
                  <td>{{ dt.landRemark }}</td>
              </tr>
          </table>
          </el-descriptions-item>
          
          <el-descriptions-item label="农事内容" :span="3" label-class-name="yutitem">
            {{options.taskContent}}
          </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup>
import { ref,onMounted,reactive } from 'vue';
import{useRouter,useRoute} from "vue-router"
import {getPlantLinelistDetail} from '@/api/plant'
const props = defineProps({
  options:Object
})
const details = ref({}) 
onMounted(async ()=>{
    const res = await getPlantLinelistDetail(props.options.plantLineId)
    details.value = res.data
})
</script>
<style lang="scss" scoped>
.itemTableBox{
  width: 100%;
  min-width: 1150px;
  border: 1px solid #ebeef5;
  border-collapse:collapse ;
  th,td{
      text-align: left; 
      span{
          color: #f70808;
      }
  }
  th{
      background-color: #d3d7dd;
      height: 30px;
      padding: 0 8px;
      &+th{
          border-left: 1px solid #ebeef5;
      }
  }
  td{
      text-align: left;
      padding:6px 8px;
      border-top: 1px solid #ebeef5;
      &+td{
          border-left: 1px solid #ebeef5;   
      }
      
  }
  .tbItemFlex{
      display: flex;
      align-items: center;
      .el-icon{
          cursor: pointer;
          &:hover{

          }
      }
  }
}
</style>
<style lang="scss">
.el-descriptions__label{
  &.yutitem{
    width: 100px;
    word-wrap: break-word;
    word-break: break-all;
  }
}
</style>